<template>
	<div>
		<div class="title">单词本</div>
		<div class="content">
			<div class="content-left">
				<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
					<div>
						<div class="option_btn" :class="'' == state.status?'option_btn_active':''"
							@click="clickStatus('')">
							全部
						</div>
						<div class="option_btn" :class="'1' == state.status?'option_btn_active':''"
							@click="clickStatus('1')">未复习
						</div>
						<div class="option_btn" :class="'2' == state.status?'option_btn_active':''"
							@click="clickStatus('2')">已复习
						</div>
					</div>
					<div>
						<el-input v-model="state.wordText" :prefix-icon="Search" @input="search"
							:clearable="true"></el-input>
					</div>
				</div>
				<div class="operate">
					<div class="operate-left">
						<div class="botton" @click="sortList('word')">首字母升/降序
							<template v-if="state.column == 'word'">
								<el-icon v-if="state.order =='asc'">
									<CaretTop />
								</el-icon>
								<el-icon v-else>
									<CaretBottom />
								</el-icon>
							</template>

						</div>
						<div class="botton" @click="sortList('createTime')">加入时间升/降序
							<template v-if="state.column == 'createTime'">
								<el-icon v-if="state.order =='asc'">
									<CaretTop />
								</el-icon>
								<el-icon v-else>
									<CaretBottom />
								</el-icon>
							</template>
						</div>
					</div>
					<div class="operate-right">
						<el-button type="danger" @click="state.updateFlag = true">批量标记复习</el-button>
						<el-button type="danger" @click="state.checkFlag = true">批量删除</el-button>
						<el-button type="danger" @click="state.dialogVisible = true">添加单词</el-button>
					</div>
				</div>
				<div class="tip-box" v-if="state.checkFlag || state.updateFlag">
					<div class="tips-left">
						请点击选中本页需要标记复习的单词
						<el-button type="danger" link @click="clickAll">全选</el-button>
						<el-button type="danger" link @click="selectReverse">反选</el-button>
					</div>
					<div>
						<el-button size="small" @click="cancel">取消</el-button>
						<el-button size="small" @click="confirmSave">确定</el-button>
					</div>
				</div>
				<el-checkbox-group v-model="state.checkList" @change="changeBox">
					<div class="list">
						<template v-for="item in state.wordBookList">
							<div class="word-item" :class="item.id == state.selectId?'word-item-active':''"
								@click="selectWord(item)">
								<el-checkbox v-if="state.checkFlag || state.updateFlag" :label="item.id" :id="item.id">
									{{item.word}}
								</el-checkbox>
								<div v-else>{{item.word}}</div>
							</div>
						</template>

						<el-empty :image-size="200" style="width: 100%;" v-if="state.wordBookList.length <= 0" />
					</div>
				</el-checkbox-group>
				<div class="pagination-box">
					<el-pagination :page-size="state.pageSize" :total="state.total"
						@currentChange="currentChange"></el-pagination>
				</div>
			</div>
			<div class="content-right">
				<div class="top">
					<textarea class="textarea" v-model="state.word.remark" style="height: 90%;width: 200px;"></textarea>
				</div>
				<div class="button">
					<el-button type="danger" :icon="Delete" @click="del" link>删除单词</el-button>
					<el-button type="danger" size="small" @click="save">保存笔记</el-button>
				</div>
			</div>
		</div>
		<el-dialog v-model="state.dialogVisible" title="添加单词" width="400px" center :before-close="handleClose">
			<div class="dialog-content">
				<el-form ref="ruleFormRef" :model="form" label-width="120px" label-position="top">
					<el-form-item label="单词">
						<el-input v-model="form.word" />
					</el-form-item>
					<el-form-item label="笔记/说明：">
						<el-input v-model="form.remark" type="textarea" rows="10" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false">取消</el-button>
					<el-button type="danger" @click="addWord">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		Delete,
		Search
	} from '@element-plus/icons-vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router';

	const {
		proxy
	} = getCurrentInstance()
	const router = useRouter()
	const route = useRoute()


	const state = reactive({
		dialogVisible: false,
		wordBookList: [],
		total: 0,
		pageNo: 1,
		pageSize: 36,
		word: {},
		selectId: '',
		checkList: [],
		checkFlag: false,
		updateFlag: false,
		status: '',
		column: 'word',
		order: 'asc',
		wordText: ''
	})

	const form = reactive({
		word: '',
		status: '1',
		remark: '',
	})


	onMounted(() => {})

	function clickStatus(status) {
		state.status = status;
		getWordBookList()
	}

	function sortList(column) {
		state.column = column
		state.order = state.order == 'desc' ? 'asc' : 'desc';
		getWordBookList()
	}

	function currentChange(e) {
		state.pageNo = e
		getWordBookList()
	}

	function search() {
		state.pageNo = 1
		getWordBookList()

	}

	function getWordBookList() {
		proxy.$http.get('/boot/user/wordBook/list?word=' + state.wordText + '&pageNo=' + state.pageNo + '&pageSize=' +
			state.pageSize + '&status=' + state.status + '&column=' + state.column + '&order=' + state.order).then(
			res => {
				if (res.data.success) {
					state.wordBookList = res.data.result.records
					if (res.data.result.records.length > 0) {
						state.word = res.data.result.records[0];
						state.selectId = state.word.id
					}
					state.total = res.data.result.total;
				}
			})
	}

	function selectWord(item) {
		state.word = item;
		state.selectId = item.id;
	}


	function addWord() {
		if (!form.word) {
			ElMessage({
				message: '请输入单词!',
				type: 'error'
			})
			return;
		}
		proxy.$http.post('/boot/user/wordBook/add', form).then(res => {
			if (res.data.success) {
				ElMessage({
					message: '保存成功!',
					type: 'success',
				})
				state.dialogVisible = false
				getWordBookList()
				form.word = ''
				form.remark = ''
			}
		})
	}

	function save() {
		proxy.$http.post('/boot/user/wordBook/edit', state.word).then(res => {
			if (res.data.success) {
				ElMessage({
					message: '保存成功!',
					type: 'success',
				})
			}
		})
	}

	function handleClose() {
		state.dialogVisible = false;
	}


	function changeBox() {
		console.log(state.checkList)
	}

	function confirmSave() {
		state.ids = state.checkList.join(",")
		if (state.updateFlag) {
			updateStatus();
		} else if (state.checkFlag) {
			deleteBatch();
		}
	}

	function clickAll() {
		state.checkList = [];
		state.wordBookList.forEach((item) => {
			state.checkList.push(item.id);
		})
	}

	function selectReverse() {
		let reverseList = []
		state.wordBookList.forEach((item) => {
			if (!state.checkList.includes(item.id)) {
				reverseList.push(item.id);
			}
		})
		console.log(reverseList);
		state.checkList = reverseList;
	}

	function cancel() {
		state.checkFlag = false
		state.updateFlag = false
	}

	function deleteBatch() {
		proxy.$http.delete('/boot/user/wordBook/deleteBatch?ids=' + state.ids).then(res => {
			if (res.data.success) {
				ElMessage({
					message: '删除成功!',
					type: 'success',
				})
				getWordBookList();
				state.checkFlag = false;
			}
		})
	}

	function updateStatus() {
		proxy.$http.postForm('/boot/user/wordBook/updateStatus?', {
			ids: state.ids
		}).then(res => {
			if (res.data.success) {
				ElMessage({
					message: '标记成功!',
					type: 'success',
				})
				getWordBookList();
				state.updateFlag = false;
			}
		})
	}

	function del() {
		proxy.$http.delete('/boot/user/wordBook/delete?id=' + state.word.id).then(res => {
			if (res.data.success) {
				ElMessage({
					message: '删除成功!',
					type: 'success',
				})

				getWordBookList();
			}
		})

	}

	getWordBookList()
</script>

<style lang="less">
	.title {
		font-family: SourceHanSansCN-Medium;
		font-size: 16px;
		color: #333333;
	}

	.content {
		width: 100%;
		height: 600px;
		margin: 10px 0;
		border-radius: 10px;
		padding: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.option_btn {
			text-align: center;
			border: 1px solid #E6ECF2;
			width: 80px;
			height: 34px;
			line-height: 34px;
			margin-right: 0px;
			padding: 0px 0px;
			background-color: #FFFFFF;
			color: #24272B;
			font-size: 14px;
			display: inline-block;
			cursor: pointer;
			min-width: 60px;
			text-align: center;
			margin: 0px -1px -1px 0px;
		}

		.option_btn_active {
			border-radius: 0px;
			background-color: #FFEFEE;
			color: #FF4B40;
		}

		.content-left {
			width: 100%;
			padding-right: 20px;
			display: flex;
			flex-direction: column;
			position: relative;

			.operate {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 10px 0;

				.operate-left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.botton {
						cursor: pointer;
						margin-left: 10px;
						display: flex;
						flex-direction: row;
						align-items: center;
					}
				}
			}

			.tip-box {
				padding: 10px 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.list {
				margin: 10px 0;
				//height: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.word-item {
					border: 1px solid #E6ECF2;
					background-color: #FFFFFF;
					color: #24272B;
					font-size: 14px;
					cursor: pointer;
					margin: 0px -1px -1px 0px;
					width: 197px;
					min-height: 50px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 10px;
				}

				.word-item-active {
					border-radius: 0px;
					background-color: #FFEFEE;
					color: #FF4B40;
				}
			}

			.pagination-box {
				width: 100%;
				display: flex;
				justify-content: center;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}

		.content-right {

			.top {
				display: flex;
				height: 90%;

				.textarea {
					padding: 10px;
					border: 1px solid rgba(235, 235, 235, 1);
				}

				.textarea:focus {
					outline: none;
					border: 1px solid rgba(235, 235, 235, 1);
				}
			}

			.button {
				flex-shrink: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 20px;
			}
		}

		input[type='checkbox'] {
			height: auto !important;
		}

	}
</style>